<template>
  <a-modal v-model:visible="visible" title="开票申请单" @ok="handleOk" @cancel="handleCancel" width="1000px">
    <a-form :model="form" :rules="rules" :label-col="{ style: { width: '140px' } }" ref="formRef">
      <a-row gutter="16">
        <a-col span="24">
          <a-form-item label="发票性质" name="type" class="invoice-type-row">
            <div class="invoice-type-container">
              <a-radio-group v-model:value="form.type">
                <a-radio :value="0">增值税专用发票</a-radio>
                <a-radio :value="1">普通发票</a-radio>
              </a-radio-group>
              <span class="current-date">当前日期：{{ currentDate }}</span>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row gutter="16">
        <a-col span="12">
          <a-form-item label="对方单位名称" name="counterpartName" required>
            <a-input v-model:value="form.counterpartName" placeholder="请输入对方单位名称" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="纳税人识别号" name="tin" required>
            <a-input v-model:value="form.tin" placeholder="请输入纳税人识别号" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="对方开户银行" name="counterpartBank">
            <a-input v-model:value="form.counterpartBank" placeholder="请输入对方开户银行" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="对方开户账号" name="counterpartBankAccount">
            <a-input v-model:value="form.counterpartBankAccount" placeholder="请输入对方开户账号" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="对方单位地址" name="counterpartAddress">
            <a-input v-model:value="form.counterpartAddress" placeholder="请输入对方单位地址" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="对方单位电话" name="counterpartPhone">
            <a-input v-model:value="form.counterpartPhone" placeholder="请输入对方单位电话" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="开具发票单位" name="openerName" required>
            <a-input v-model:value="form.openerName" placeholder="请输入开具发票单位" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="开具发票内容" name="openerContent" required>
            <a-input v-model:value="form.openerContent" placeholder="请输入开具发票内容" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="开具单价" name="openerPrice" required>
            <a-input v-model:value="form.openerPrice" placeholder="请输入开具单价" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="开具数量" name="openerNum" required>
            <a-input v-model:value="form.openerNum" placeholder="请输入开具数量" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="开票金额" name="openerSumPrice" required>
            <a-input v-model:value="form.openerSumPrice" placeholder="请输入开票金额" />
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="合计金额" name="sumPrice" required>
            <a-input v-model:value="form.sumPrice" placeholder="请输入合计金额" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <div class="d-j-around">
        <a-button @click="handleCancel" class="d-a-center">取消</a-button>
        <a-button type="primary" @click="handleOk" class="d-a-center">申请开票</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {} from '@/api'
import { insertInstitutionInvoice } from '@/api/buisness/index'
const currentDate = ref('')

onMounted(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  currentDate.value = `${year}年${month}月${day}日`
})
const visible = ref(false)
const formRef = ref()
const emit = defineEmits(['submit'])
const useForm = () => {
  return {
    type: 0,
    counterpartName: '',
    tin: '',
    counterpartBank: '',
    counterpartBankAccount: '',
    counterpartAddress: '',
    counterpartPhone: '',
    openerName: '',
    openerContent: '',
    openerPrice: '',
    openerNum: '',
    openerSumPrice: '',
    sumPrice: '',
    orderJson: ''
  }
}
const form = ref(useForm())
const rules = {
  counterpartName: [{ required: true, message: '请输入对方单位名称' }],
  tin: [{ required: true, message: '请输入纳税人识别号' }],
  openerName: [{ required: true, message: '请输入开具发票单位' }],
  openerContent: [{ required: true, message: '请输入开具发票内容' }],
  openerPrice: [{ required: true, message: '请输入开具单价' }],
  openerNum: [{ required: true, message: '请输入开具数量' }],
  openerSumPrice: [{ required: true, message: '请输入开票金额' }],
  sumPrice: [{ required: true, message: '请输入合计金额' }]
}

const handleOk = () => {
  formRef.value
    .validate()
    .then(async () => {
      let res = await insertInstitutionInvoice(form.value) // 传递 form.value

      if (res.success) {
        message.success('提交成功')
        visible.value = false
        emit('submit')
      }
    })
    .catch(() => {
      message.error('请填写完整信息')
    })
}

const handleCancel = () => {
  visible.value = false
}

const showModal = data => {
  form.value.orderJson = data.join(',')
  visible.value = true
}

defineExpose({
  showModal
})
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 16px;
}
.ant-form-item-label {
  font-weight: 500;
  width: 120px !important;
  text-align: right;
  flex: 0 0 120px;
}
.ant-form-item-label > label {
  min-width: 120px;
  justify-content: flex-end;
}
.ant-input {
  width: 100%;
}
.invoice-type-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.current-date {
  font-size: 14px;
  color: #666;
  margin-left: auto;
}
</style>
